<template>
	<div class="sidebar">
		<div class="logo" @click="goHome">
			<img src="../assets/images/logo.svg">
		</div>
		<el-menu :default-active="this.$route.path" class="el-menu-vertical-demo" router active-text-color="#009FE8">
			<el-menu-item index="/Home/Index" @click="refresh('/Home/Index')">
				<i class="fa fa-home fa-fw"></i>
				<span slot="title">首页</span>
			</el-menu-item>
			<el-menu-item index="/Home/Housing" v-show="userInfo &&　userInfo.companyType != '-1'">
				<i class="fa fa-photo fa-fw"></i>
				<span slot="title">我的房源</span>
			</el-menu-item>
			<el-menu-item index="/Home/Brochure">
				<i class="fa fa-book fa-fw"></i>
				<span slot="title">我的楼书</span>
			</el-menu-item>
			<el-menu-item index="/Home/Follow">
				<i class="fa fa-commenting-o fa-fw"></i>
				<span slot="title">我的关注</span>
			</el-menu-item>
			<el-menu-item index="/Home/Authentication">
				<i class="fa fa-cog fa-fw"></i>
				<span slot="title">个人信息与认证</span>
			</el-menu-item>
			<el-menu-item index="/Home/New">
				<i class="fa fa-envelope-o fa-fw"></i>
				<span slot="title">我的消息</span>
			</el-menu-item>
			<el-menu-item index="/Home/Developers" v-if="userInfo.companyType!=-1 && userInfo.companyType!=1">
				<i class="fa fa-user fa-fw"></i>
				<span slot="title">开发商名录</span>
			</el-menu-item>
			<el-menu-item index="/Home/Apartment"  v-if="userInfo.companyType!=-1 && userInfo.companyType!=1">
				<i class="fa fa-area-chart fa-fw"></i>
				<span slot="title">户型图</span>
			</el-menu-item>
			<!-- <el-menu-item index="/Home/About">
        <i class="fa fa-file-excel-o fa-fw"></i>
        <span slot="title">关于智选</span>
      </el-menu-item>-->
		</el-menu>
	</div>
</template>

<script>
	export default {
		name: "Sidebar",
		data() {
			return {
				userInfo: {}
			};
		},
		created() {
			if(localStorage.userInfo) {
				this.userInfo = JSON.parse(localStorage.userInfo);
			}
		},
		mounted() {},
		methods: {
			// 重新加载
			refresh(route) {
				this.$router.replace({
					path: route
				});
			},
			goHome(){
				window.location.href = '/home/html/';
			}
		}
	};
</script>

<style scoped>
	.logo {
		width: 100%;
		height: 64px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.logo>img {
		width: 160px;
		height: 40px;
	}

	.sidebar {
		height: 100%;
		width: 242px;
		background: #ffffff;
		border-right: 1px #e8ecef solid;
	}

	.sidebar>ul {
		height: 100%;
	}

	.sidebar>ul>li {
		width: 100%;
		height: 48px;
		line-height: 48px;
	}

	/deep/ .el-menu-item {
		border-bottom: none;
		color: #778ca2;
	}

	/deep/ .el-menu-item:hover {
		background: #f8fafb;
		color: #009fe8;
		transition: background 0.3s;
		-moz-transition: background 0.3s;
		-webkit-transition: background 0.3s;
		-o-transition: background 0.3s;
	}

	/deep/ .el-menu-item.is-active {
		background: #f8fafb;
		border-bottom: none;
		color: #009fe8;
	}

	/deep/ .el-menu-item i {
		margin-right: 5px;
		color: inherit;
	}

	.el-menu-item-pt {
		padding: 0 50px !important;
	}

	.fa {
		font-size: 18px;
	}
</style>
